<template>
  <!-- 底部部分 -->
  <footer class="footer">
      <span class="todo-count"><strong>{{ totalCount }}</strong>剩余</span>
      <!--  利用冒泡来传递数据 -->
      <ul class="filters" @click="$emit('changeType',type)">
        <li>
          <a @click="type='all'" :class="{selected : type==='all'}" href="#/">全部</a>
        </li>
        <li>
          <a @click="type='no'" :class="{selected : type==='no'}"  href="#/">进行中</a>
        </li>
        <li>
          <a @click="type='yes'" :class="{selected : type==='yes'}"  href="#/">已完成</a>
        </li>
      </ul>
      <button  @click="hClear" v-show="showClear" class="clear-completed">清除已完成</button>
    </footer>
</template>

<script>
export default {
    props:{
        list:{
            type:Array,
            require:true
        },
    },
    data(){
      return{
        //type的取值范围为 all / yes / no
        type:"all",
      }
    },
    computed:{
        totalCount(){
            return this.list.length
        },
        
        showClear(){
        return this.list.some(item => item.isDone)
      }
    },
    methods:{
      hClear(){
        this.$emit('clearDone')
      },
      
    }
}
</script>

<style>

</style>